<template>
  <u-popup round="18" mode="center" :show="showPopup && !isClose">
    <view class="update">
      <view class="update_top">
        <image src="@/static/image/common/update.png" mode="widthFix" />
      </view>
      <view>
        <view class="text-center" v-if="versionInfo"
          >版本已更新至：{{ versionInfo.newversion }}</view
        >
        <view class="text-center">您的当前版本：{{ system.appVersion }}</view>
        <view class="bot_view flex flex-middle flex-around" v-if="!downing">
          <u-button
            text="稍后升级"
            style="margin-right: 12px"
            v-if="versionInfo && !versionInfo.enforce"
            @click="closePopup"
          />
          <u-button type="primary" text="立即升级" @click="updateApp" />
        </view>
        <view class="bot_view text-center" v-else>
          <u-line-progress :percentage="percentage" />
          <view style="margin-top: 12px">下载进度:{{ downLoad }}</view>
          <u-button
            type="primary"
            text="立即安装"
            style="margin-top: 12px"
            v-if="filename"
            @click="installApp(filename)"
          />
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      downing: false,
      downSize: 0,
      fileSize: 0,
      downer: null,
      isClose: false,
      filename: "",
    };
  },
  computed: {
    ...mapGetters(["versionInfo", "system", "isIos"]),
    showPopup() {
      let state = false;
      //#ifdef APP-PLUS
      if (
        this.versionInfo &&
        this.versionInfo.newversion !== this.system.appVersion &&
        this.$envConfig.env == "production"
      )
        state = true;
      //#endif
      return state;
    },
    percentage() {
      const number = (this.downSize / this.fileSize) * 100;
      return number.toFixed(0);
    },
    downLoad() {
      const dSize = (this.downSize / 1024 / 1024).toFixed(2);
      const fSize = (this.fileSize / 1024 / 1024).toFixed(2);
      if (dSize == fSize) return `完成`;
      return `${dSize}M/${fSize}M`;
    },
  },
  watch: {
    downSize() {
      if (this.downSize == this.fileSize && this.downer) {
        clearInterval(this.downer);
        return;
      }
    },
  },
  methods: {
    closePopup() {
      this.isClose = true;
    },
    updateApp() {
      if (!this.isIos) return this.startDown();
      let appleId = 6472634144;
      plus.runtime.launchApplication(
        {
          action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`,
        },
        (e) => {
          console.log(e);
        }
      );
    },
    async startDown() {
      this.downing = true;
      this.downingApp();
    },
    async downingApp() {
      let dtask = plus.downloader.createDownload(
        this.$envConfig.baseUrl + this.versionInfo.downloadurl
      );
      dtask.addEventListener("statechanged", (task, status) => {
        if (!status) return;
        if (status == 200) {
          switch (task.state) {
            case 3:
              this.downSize = task.downloadedSize;
              if (task.totalSize) {
                this.fileSize = task.totalSize;
              }
              break;
            case 4:
              this.filename = task.filename;
              this.installApp(task.filename);
              break;
          }
          return;
        }
        this.downing = false;
        this.closePopup();
        this.$toast("下载出错");
      });
      dtask.start();
    },
    installApp(path) {
      plus.runtime.install(
        path,
        {},
        () => {},
        (e) => {
          this.closePopup();
          this.$toast(`安装更新文件失败[${e.code}]：${e.message}`);
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.update {
  width: 300px;
  // update_top
  &_top {
    margin-top: -18px;
    image {
      width: 100%;
    }
  }
  .bot_view {
    padding: 12px;
  }
}
</style>